import React, { Suspense } from "react";
import dynamic from "next/dynamic";
import { AboutMarkdownSection } from "../../components/AboutMarkdownSection";
import { HomeHeroCarousel } from "../../components/HomeHeroCarousel";
import { getAboutMarkdown, getFloors, getSolutions, getHero } from "../../lib/data";

// 动态导入非关键组件，优化首屏加载
const ProductCarouselSection = dynamic(
  () => import("../../components/ProductCarouselSection").then((mod) => ({ default: mod.ProductCarouselSection })),
  { 
    ssr: true,
    loading: () => <SectionSkeleton />
  }
);

const SolutionsCarousel = dynamic(
  () => import("../../components/SolutionsCarousel").then((mod) => ({ default: mod.SolutionsCarousel })),
  { 
    ssr: true,
    loading: () => <SectionSkeleton />
  }
);

export const revalidate = 300;

// 加载占位符组件
function SectionSkeleton() {
  return (
    <div className="relative bg-[#f5f7fb] py-16 md:py-20 animate-pulse">
      <div className="mx-auto w-full max-w-5xl px-4 md:px-6">
        <div className="h-4 w-32 bg-gray-300 rounded mx-auto mb-3"></div>
        <div className="h-8 w-64 bg-gray-300 rounded mx-auto mb-3"></div>
        <div className="h-4 w-96 bg-gray-200 rounded mx-auto"></div>
      </div>
    </div>
  );
}

export default function HomePage({ params }: { params: { locale: string } }) {
  const locale = params.locale;

  // 并行加载数据（React 会自动优化）
  const [floors, solutionsData, aboutMarkdown, heroData] = [
    getFloors(locale),
    getSolutions(locale),
    getAboutMarkdown(locale),
    getHero(locale),
  ];
  
  const primaryFloor = floors[0];

  return (
    <main className="flex flex-col gap-0">
      <HomeHeroCarousel data={heroData} />

      <Suspense fallback={<SectionSkeleton />}>
        {primaryFloor && (
          <ProductCarouselSection
            products={primaryFloor.products}
            title={
              primaryFloor.hero?.title ??
              primaryFloor.title ??
              "核心监测终端与智能设备"
            }
            description={
              primaryFloor.hero?.description ??
              primaryFloor.hero?.subtitle ??
              "多模态感知硬件覆盖城市结构安全监测的关键场景，支持长续航、低功耗与云端协同。"
            }
            eyebrow={primaryFloor.hero?.eyebrow ?? "Product Portfolio"}
          />
        )}
      </Suspense>

      <Suspense fallback={<SectionSkeleton />}>
        {solutionsData?.items?.length ? (
          <SolutionsCarousel
            items={solutionsData.items}
            title={
              solutionsData.hero?.title ??
              solutionsData.title ??
              "行业安全监测解决方案矩阵"
            }
            description={
              solutionsData.hero?.description ??
              solutionsData.hero?.subtitle ??
              "覆盖房屋、边坡、交通、能源等多场景的安全监测方案，联动多源感知与云端智能决策。"
            }
            eyebrow={solutionsData.hero?.eyebrow ?? "Solutions Suite"}
          />
        ) : null}
      </Suspense>

      <Suspense fallback={<SectionSkeleton />}>
        <AboutMarkdownSection content={aboutMarkdown} locale={locale} />
      </Suspense>
    </main>
  );
}